<template>
	<eui-page-frame topHeight="254">
		<template #top>
			<view class="navigation">
				<eui-nav-bar :title="barTitle" color="#000000" rightIcon="" />
				<eui-tab :tabs="tabData" :spaceLeft="spaceLeft" :value="tabIndex" :showBadge="true" @change="tabChange">
				</eui-tab>
			</view>
		</template>
		<eui-page-content>
			<!-- <view style="margin-bottom: 10px;">
					<eui-week-calendar :value="currentDay" @change="changeDate" />
				</view> -->
			<eui-base-card>
				<eui-virtual-list v-if="dataList.length > 0" :origList="dataList" :options="options" type="list3" />
				<view v-else class="nodata">
					<image src="@/static/img/no_data.png" mode="aspectFit" class="nodata-image" />
				</view>
			</eui-base-card>
		</eui-page-content>
	</eui-page-frame>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app";
import useService from '@/hooks/useService';

const service = useService({ prefix: "apiApi" });

const spaceLeft = ref(6);
const barTitle = ref('');
const stdt = ref('');
const endt = ref('');
const frequency = ref('');
const tabIndex = ref(0);

const tabData = ref([{ name: '全部', corner: 0 }, { name: '已报备', corner: 0 }, { name: '未报备/已驳回', corner: 0 }]);

const dataList = ref([
	{ name: '', status: '', statusColor: '' },
]);
const options = ref({
	leftParam: 'name',
	rightParam: 'status',
	rightParamColor: 'statusColor'
});

const tabChange = (e) => {
	tabIndex.value = e;
	getReportData();
}

onLoad((options) => {
	barTitle.value = decodeURIComponent(options.project);
	stdt.value = decodeURIComponent(options.stdt);
	endt.value = decodeURIComponent(options.edt);
	frequency.value = decodeURIComponent(options.frequency);
})

onShow(() => {
	console.log('onShow', barTitle.value, stdt.value, endt.value, frequency.value);
	getReportData();
})

const getReportData = async () => {
	const req = {
		type: barTitle.value,
		stdt: stdt.value,
		endt: endt.value,
		reportStatus: '全部',
	}

	tabData.value = [{ name: '全部', corner: 0 }, { name: '已报备', corner: 0 }, { name: '未报备/已驳回', corner: 0 }];

	uni.showLoading({ title: "加载中...", mask: true });
	const res = await service.request('管易通物业模块服务', 'GetReportDataByParams', req);
	uni.hideLoading();
	dataList.value = [];
	console.log('报事申请统计数据', JSON.stringify(res));
	if (res) {
		const resObject = res;
		if (resObject.length > 0) {
			tabData.value = [
				{ name: '全部', corner: resObject.length },
				{ name: '已报备', corner: resObject.filter(y => y.c_report_status === '已报备').length },
				{ name: '未报备/已驳回', corner: resObject.filter(y => y.c_report_status === '未报备' || y.c_report_status === '已驳回').length }];

			dataList.value = resObject.filter(x => tabIndex.value === 0 || (tabIndex.value === 1 && x.c_report_status === '已报备')
				|| (tabIndex.value === 2 && (x.c_report_status === '未报备' || x.c_report_status === '已驳回'))).map(x => {
					return {
						name: x.c_brand_name ? x.c_brand_name : x.c_provider_name + '[' + x.c_con_no + ']',
						status: x.c_report_status,
						statusColor: x.c_report_status === '未报备' ? '#FF7E00' : (x.c_report_status === '已驳回' ? '#F95C19' : '#000000'),
					}
				});
		}
	}
}

</script>

<style lang="scss">
.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	background-color: #F2F2F2;
	padding: 0 !important
}


.navigation {
	background: #FFFFFF;
	flex: 0 0 auto;
	margin-bottom: 0;
}

.card {
	border-radius: 16rpx;
	//margin: 0px 10px 10px 10px;
	background-color: #ffffff;
}

.nodata {
	width: 100%;
	height: 560rpx;

	image {
		width: 100%;
		height: 80%;
		opacity: 0.4;
	}
}
</style>